<template>
  <div
    id="body-wrap"
  >
    <div
      id="nav"
      class="post-bg"
      :style="style"
    >
      <page-header/>
      <div id="post-info">
        <div id="post-title">
          <div class="posttitle">
            {{ article.title }}
          </div>
        </div>
        <div id="post-meta">
          <div class="meta-firstline">
            <time class="post-meta__date"><span
              class="post-meta__date-created"
              :title=" article.createTime |dateTimeFormat"
            ><i class="fa fa-calendar" aria-hidden="true"/> 发表于 {{ article.createTime |dateTimeFormat }}</span>
              <span class="post-meta__separator">|</span>
              <span
                class="post-meta__date-updated"
                :title=" article.updateTime |dateTimeFormat "
              >
                <i
                  class="fa fa-history"
                  aria-hidden="true"
                /> 更新于 {{ article.updateTime |dateTimeFormat }}</span>
            </time>
          </div>
          <div class="meta-secondline">
            <span class="post-meta-wordcount">
              <i
                class="post-meta__icon fa fa-file-word-o"
                aria-hidden="true"
              /><span>字数总计:</span>
              <span class="word-count">{{ article.wordTotal| wordCount }}</span><span
              class="post-meta__separator"
            >|</span>
              <i
                class="post-meta__icon fa fa-clock-o"
                aria-hidden="true"
              />
              <span>阅读时长: {{ article.readTime }} 分钟</span></span>
          </div>
          <div class="meta-thirdline">
            <span class="post-meta-pv-cv">
              <span class="post-meta__separator">|</span>
              <i
                class="fa fa-eye post-meta__icon"
                aria-hidden="true"
              />
              <span>阅读量:</span>
              <span>{{ article.read }}</span>
            </span>
            <span class="post-meta-commentcount"/>
          </div>
        </div>
      </div>
    </div>
    <main
      id="content-inner"
      class="layout_post"
    >
      <article id="post">
        <div
          id="article-container"
          class="post-content"
        >
          <mavon-editor
            class="md"
            :value="article.content"
            :subfield="false"
            :font-size="fontSize"
            :default-open="'preview'"
            :toolbars-flag="false"
            :box-shadoww="false"
            :editable="false"
            :scroll-style="false"
            :ishljs="true"
            code-style="atelier-lakeside-dark"
          />
        </div>
        <div class="post-copyright">
          <div class="post-copyright__author">
            <span class="post-copyright-meta">文章作者: </span>
            <span class="post-copyright-info">
              <a href="mailto:undefined">Jo·小助理</a>
            </span>
          </div>
          <div class="post-copyright__type">
            <span class="post-copyright-meta">文章链接: </span>
            <span class="post-copyright-info">
              <a
                :href="href"
                target="_blank"
                :alt="href"
              >https://www.keepon.online{{ $route.fullPath }}</a>
            </span>
          </div>
          <div class="post-copyright__notice">
            <span class="post-copyright-meta">版权声明: </span>
            <span class="post-copyright-info">本博客所有文章除特别声明外，均采用
              <a
                href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
                target="_blank"
              >CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自
              <a
                href="https://www.keepon.online"
                target="_blank"
              >小助理</a>！
            </span>
          </div>
        </div>
        <div class="tag_share">
          <div class="post-meta__tag-list"/>
        </div>
        <div class="post-reward">
          <a class="reward-button button--primary button--animated"> <i
            class="fa fa-qrcode"
          /> 打赏
            <div class="reward-main">
              <ul class="reward-all">
                <li class="reward-item"><img
                  class="post-qr-code__img"
                  src="@/assets/img/wechat.png"
                  alt="微信"
                >
                  <div class="post-qr-code__desc">微信</div>
                </li>
                <li class="reward-item"><img
                  class="post-qr-code__img"
                  src="@/assets/img/alipay.png"
                  alt="支付宝"
                >
                  <div class="post-qr-code__desc">支付宝</div>
                </li>
              </ul>
            </div>
          </a>
        </div>
      </article>
    </main>
    <doc-footer/>
    <vue-element-loading :active="isActive" :is-full-screen="true"/>
  </div>
</template>

<script>
  import DocFooter from '@/layout/components/DocFooter/index'
  import PageHeader from '@/layout/components/PageHeader/index'
  import {detailArticle} from '@/api/article'
  import {parseTime} from '@/utils'
  import axios from 'axios'
  import VueElementLoading from 'vue-element-loading'
  export default {
    name: 'Detail',
    components: {PageHeader, DocFooter,VueElementLoading},
    data() {
      return {
        href: 'https://www.keepon.online' + this.$route.fullPath,
        content: '',
        style: '',
        fontSize: '20px',
        wordTotal: 0,
        readTime: 0,
        isActive:true,
        article: {
          title: '',
          createTime: 0,
          updateTime: 0,
          read: 0,
          content: ''
        }
      }
    },
    beforeCreate () {
      document.title =  this.$route.meta.title
    },
    filters: {
      dateTimeFormat(date) {
        return parseTime(date, '{y}-{m}-{d} {h}:{i}:{s}')
      },
      wordCount(count) {
        return count < 1000 ? count : Math.round(count / 100) / 10 + 'k'
      }
    },
    created() {
      this.getArticle(this.$route.params.id)
      this.backImg()
    },
    methods: {
      getArticle(id) {
        detailArticle(id).then(response => {
          if (response.data.code === 20000) {
            this.article = response.data.payload
            this.$route.meta.title=response.data.payload.title
            document.title =  this.$route.meta.title
            this.isActive=false
          }
          if (response.data.code === 61003) {
            this.$router.push({path: "/404"})
          }
        })
      },
      backImg() {
        const url = 'https://www.bing.com'
        axios.get('https://www.keepon.online/api/web/image').then(re => {
          const bing = url + re.data.payload.images[0].url
          this.style = 'background-image: url(' + bing + '); background-attachment: fixed;'
        })
      }
    }
  }
</script>
